<template>
	<div id="Chances">
		<el-form :inline="true" :model="formInline" class="demo-form-inline">
			</br>
			<el-form-item label="客户名称">
				<el-input v-model="formInline.tsName"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="danger" @click.prevent="onSuf">查询</el-button>
				<el-button type="primary" @click.prevent="onSubmit">帮助</el-button>
				<el-button type="success" @click.prevent="onCreate">新建</el-button>
			</el-form-item>
		</el-form>
		<div class="line"></div>
		<template>
			<el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%"
				max-height="420">
				<el-table-column fixed prop="id" label="编号" width="100">
				</el-table-column>
				<el-table-column prop="name" label="客户名称" width="200">
				</el-table-column>
				<el-table-column prop="content" label="概要" width="120">
				</el-table-column>
				<el-table-column prop="managerName" label="联系人" width="120">
				</el-table-column>
				<el-table-column prop="phone" label="联系人电话" width="180">
				</el-table-column>
				<el-table-column prop="state" label="状态" width="100" :formatter="forstate"
					:filters="[{ text: '未分配', value: 1 }, { text: '已分配', value: 2 }]" :filter-method="filterTag">
				</el-table-column>
				<el-table-column prop="createTime" label="创建时间" width="180">
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="150">
					<template slot-scope="scope">
						<el-button @click.native.prevent="deleteRow(scope.$index, scope.row)" type="text" size="small"
							:disabled="scope.row.createUserName === createUserName && scope.row.state === 1?false:true">
							移除
						</el-button>
						<el-button type="text" size="small" @click.prevent="edit(scope.$index, scope.row)"
							:disabled="scope.row.state===2?true:false">
							编辑
						</el-button>
						<el-button type="text" size="small" @click.prevent="look(scope.$index, scope.row)">
							查看
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</template>
		<div class="block">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="currentPage" :page-sizes="[5, 10, 20, 40]" :page-size="pagesize"
				layout="total, sizes, prev, pager, next, jumper" :total="tableData.length">
			</el-pagination>
		</div>

		<el-dialog title="查看" :visible.sync="dialogFormVisible">
			<el-form :model="form">
				<table width="700px" height="200px">
					<tr>
						<td>
							<el-form-item label="编号">
								<el-input v-model="form.id" :disabled="true"></el-input>
							</el-form-item>
						</td>
						<td>
							<el-form-item label="机会来源">
								<el-input v-model="form.chancesFrom" :disabled="true"></el-input>
							</el-form-item>
						</td>
					</tr>
					<tr>
						<td>
							<el-form-item label="客户名称">
								<el-input v-model="form.name" :disabled="true"></el-input>
							</el-form-item>
						</td>
						<td>
							<el-form-item label="成功机率">
								<el-input v-model="form.successRate" placeholder="请输入小数" :disabled="true"></el-input>
							</el-form-item>
						</td>
					</tr>
					<tr>
						<td colspan="2">
							<el-form-item label="概要">
								<el-input v-model="form.content" :disabled="true"></el-input>
							</el-form-item>
						</td>
					</tr>
					<tr>
						<td>
							<el-form-item label="联系人">
								<el-input v-model="form.managerName" :disabled="true"></el-input>
							</el-form-item>
						</td>
						<td>
							<el-form-item label="联系电话">
								<el-input v-model="form.phone" :disabled="true"></el-input>
							</el-form-item>
						</td>
					</tr>
					<tr>
						<td colspan="2">
							<el-form-item label="机会描述">
								<el-input type="textarea" :disabled="true" v-model="form.chancesDesc" rows="5"
									style="width: 500px;"></el-input>
							</el-form-item>
						</td>
					</tr>
					<tr>
						<td v-if="false">
							<el-form-item label="创建人">
								<el-input v-model="form.createUserId" :disabled="true" style="width: 200px;"></el-input>
							</el-form-item>
						</td>
						<td>
							<el-form-item label="创建人">
								<el-input v-model="form.createUserName" :disabled="true" style="width: 200px;">
								</el-input>
							</el-form-item>
						</td>
						<td>
							<el-form-item label="创建时间">
								<el-date-picker v-model="form.createTime" type="datetime" :disabled="true"
									placeholder="选择日期时间">
								</el-date-picker>
							</el-form-item>
						</td>
					</tr>
					<tr>
						<td>
							<el-form-item label="指派给">
								<el-select v-model="form.username" :disabled="true" placeholder="请选择只派人">
									<el-option v-for="item of user" :key="item.id" :label="item.name" :value="item.id">
									</el-option>
								</el-select>
							</el-form-item>
						</td>
						<td>
							<el-form-item label="指派时间">
								<el-date-picker :disabled="true" v-model="form.chancesTime" type="datetime"
									placeholder="选择日期时间">
								</el-date-picker>
							</el-form-item>
						</td>
					</tr>
				</table>
			</el-form>
		</el-dialog>

		<el-dialog title="编辑" :visible.sync="dialogEditVisible">
			<el-form :model="forms" :rules="rules" ref="forms">
				<table width="700px">
					<tr>
						<td>
							<el-form-item label="编号">
								<el-input v-model="forms.id" :disabled="true"></el-input>
							</el-form-item>
						</td>
						<td>
							<el-form-item label="机会来源" prop="chancesFrom">
								<el-input v-model="forms.chancesFrom" :disabled="disabled"></el-input>
							</el-form-item>
						</td>
					</tr>
					<tr>
						<td>
							<el-form-item label="客户名称" prop="name">
								<el-input v-model="forms.name" :disabled="disabled"></el-input>
							</el-form-item>
						</td>
						<td>
							<el-form-item label="成功机率(%)" prop="successRate">
								<el-input v-model="forms.successRate" :disabled="disabled" placeholder="请输入小数">
								</el-input>
							</el-form-item>
						</td>
					</tr>
					<tr>
						<td colspan="2">
							<el-form-item label="概要" prop="content">
								<el-input v-model="forms.content" :disabled="disabled"></el-input>
							</el-form-item>
						</td>
					</tr>
					<tr>
						<td>
							<el-form-item label="联系人" prop="managerName">
								<el-input v-model="forms.managerName" :disabled="disabled"></el-input>
							</el-form-item>
						</td>
						<td>
							<el-form-item label="联系电话" prop="phone">
								<el-input type="tel" v-model="forms.phone" :disabled="disabled"></el-input>
							</el-form-item>
						</td>
					</tr>
					<tr>
						<td colspan="2">
							<el-form-item label="机会描述" prop="chancesDesc">
								<el-input type="textarea" :disabled="disabled" v-model="forms.chancesDesc" rows="5"
									style="width: 500px;"></el-input>
							</el-form-item>
						</td>
					</tr>
					<tr>
						<td>
							<el-form-item label="创建人">
								<el-input v-model="forms.createUserName" :disabled="true" style="width: 200px;">
								</el-input>
							</el-form-item>
						</td>
						<td>
							<el-form-item label="指派给" prop="username">
								<el-select v-model="forms.username" :disabled="disableds" placeholder="请选择指派人">
									<el-option v-for="item of user" :key="item.id" :label="item.name"
										:value="item.username"></el-option>
								</el-select>
							</el-form-item>
						</td>
					</tr>
				</table>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.prevent="dialogEditVisible = false">取 消</el-button>
				<el-button type="primary" @click.prevent="submitForm('forms')">确 定</el-button>
			</div>
		</el-dialog>

		<el-dialog title="新建" :visible.sync="dialogAddVisible">
			<el-form :model="forma" :rules="rules" ref="forma">
				<table width="700px">
					<tr>
						<td>
							<el-form-item label="编号">
								<el-input v-model="forma.id" :disabled="true"></el-input>
							</el-form-item>
						</td>
						<td>
							<el-form-item label="机会来源" prop="chancesFrom">
								<el-input v-model="forma.chancesFrom"></el-input>
							</el-form-item>
						</td>
					</tr>
					<tr>
						<td>
							<el-form-item label="客户名称" prop="name">
								<el-input v-model="forma.name"></el-input>
							</el-form-item>
						</td>
						<td>
							<el-form-item label="成功几率(%)" prop="successRate">
								<el-input v-model="forma.successRate"></el-input>
							</el-form-item>
						</td>
					</tr>
					<tr>
						<td colspan="2">
							<el-form-item label="概要" prop="content">
								<el-input v-model="forma.content"></el-input>
							</el-form-item>
						</td>
					</tr>
					<tr>
						<td>
							<el-form-item label="联系人" prop="managerName">
								<el-input v-model="forma.managerName"></el-input>
							</el-form-item>
						</td>
						<td>
							<el-form-item label="联系电话" prop="phone">
								<el-input type="tel" v-model="forma.phone"></el-input>
							</el-form-item>
						</td>
					</tr>
					<tr>
						<td colspan="2">
							<el-form-item label="机会描述" prop="chancesDesc">
								<el-input type="textarea" v-model="forma.chancesDesc" rows="5" style="width: 500px;">
								</el-input>
							</el-form-item>
						</td>
					</tr>
					<tr>
						<td>
							<el-form-item label="创建人">
								<el-input v-model="forma.createUserId" :disabled="true" style="width: 200px;">
								</el-input>
							</el-form-item>
						</td>
						<td>
							<el-form-item label="指派给">
								<el-select v-model="forma.username" :disabled="true" placeholder="请选择指派人">
									<el-option v-for="item of user" :key="item.id" :label="item.name"
										:value="item.username"></el-option>
								</el-select>
							</el-form-item>
						</td>
					</tr>
				</table>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogAddVisible= false">取 消</el-button>
				<el-button type="primary" @click.prevent="submitForm('forma')">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: "oppoyment",
		data() {
			return {
				juese: '',
				createUserName: '',
				currentPage: 1, //初始页
				pagesize: 5, //    每页的数据
				dialogFormVisible: false,
				dialogEditVisible: false,
				disabled: false,
				disableds: false,
				dialogAddVisible: false,
				user: [],
				form: {},
				forma: {},
				forms: {},
				formInline: { tsName: '' },
				tableData: [],
				rules: {
					chancesFrom: [
						{ required: true, message: '请输入机会来源', trigger: 'blur' },
						{ max: 20, message: '最多20个字符', trigger: 'blur' }
					],
					name: [
						{ required: true, message: '请输入客户名称', trigger: 'blur' },
						{
							validator: this.$validator.checkMaxChars,
							len: 20
						}
					],
					successRate: [
						{ required: true, message: '请输入成功几率' },
						{ validator: this.$validator.checkPercent }
					],
					content: [{
						validator: this.$validator.checkMaxChars,
						len: 50
					}],
					managerName: [
						{ required: true, message: '请输入联系人', trigger: 'blur' },
						{
							validator: this.$validator.checkMaxChars,
							len: 20
						}
					],
					phone: [
						{
							validator: this.$validator.checkTelePhone,
						},
					],
					chancesDesc: [{
						validator: this.$validator.checkMaxChars,
						len: 120
					}]
				}
			}
		},
		created() {
			let nowname = localStorage.getItem("reloname");
			this.juese = nowname,
				this.createUserName = localStorage.getItem("myToken");
			this.initTable()
			this.getUser();
		},
		methods: {
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						if (formName === 'forma') {
							this.add();
							return;
						}
						this.queren();
					} else {
						this.$message({
							message: '您还有未完善的选项',
							type: 'warning'
						})
						return false;
					}
				});
			},
			//指派
			getUser() {
				let data = {};
				this.$http.get('/sys-user/list', data).then(res => {
					this.user = res.data
				});
			},
			//表格渲染
			initTable() {
				this.$http.get('/marketing/chances').then(res => {
					this.tableData = res.data
				});
			},
			//分页
			handleSizeChange(size) {
				this.pagesize = size;
			},
			handleCurrentChange(currentPage) {
				this.currentPage = currentPage;
			},
			//查看
			look(msg, index) {
				this.dialogFormVisible = true;
				this.form = index;
			},
			//添加
			onCreate() {
				this.dialogAddVisible = true;
				this.forma.createUserId = localStorage.getItem("myToken")
			},
			add() {
				this.$http.post('/marketing/add', {
					"id": this.forma.id,
					"chancesFrom": this.forma.chancesFrom,
					"name": this.forma.name,
					"successRate": this.forma.successRate,
					"content": this.forma.content,
					"managerName": this.forma.managerName,
					"phone": this.forma.phone,
					"username": this.forma.username,
					"chancesDesc": this.forma.chancesDesc,
					"createUserId": localStorage.getItem("userId"),
					"state": 1
				}).then(res => {
					this.forma = {};
					this.$message({
						message: '恭喜你，添加成功',
						type: 'success'
					});
					this.dialogAddVisible = false
					this.initTable()
				});
			},
			//编辑
			edit(msg, index) {
				this.dialogEditVisible = true;
				this.forms = index
				if (index.state === 2) {
					this.disabled = true
				} else {
					this.disabled = false
				}
				if (localStorage.getItem("reloname") === "销售主管") {
					this.disableds = false
				} else {
					this.disableds = true;
				}
			},
			queren() {
				var state
				if (this.forms.username === null || this.forms.username === '') {
					state = 1
				} else {
					state = 2;
					this.forms.chancesTime = this.getNowFormatDate();
				}
				this.$http.post('/marketing/edit', {
					"id": this.forms.id,
					"chancesFrom": this.forms.chancesFrom,
					"name": this.forms.name,
					"successRate": this.forms.successRate,
					"content": this.forms.content,
					"managerName": this.forms.managerName,
					"phone": this.forms.phone,
					"username": this.forms.username,
					"chancesTime": this.forms.chancesTime,
					"chancesDesc": this.forms.chancesDesc,
					"createUserId": this.$route.query.role,
					"state": state
				}).then(res => {
					this.$message({
						message: '恭喜你，修改成功',
						type: 'success'
					});
					this.dialogEditVisible = false
					this.initTable()
				});
			},
			//查询
			onSuf() {
				console.log(this.formInline.tsName)
				this.$http.post('/marketing/query?name=' + this.formInline.tsName).then(res => {
					this.tableData = res.data
				})
			},
			deleteRow(index, rows) {
				console.log(rows.createUserId)
				if (rows.createUserId == localStorage.getItem("userId")) {
					this.$http.post('/marketing/delet?id=' + rows.id).then(res => {
						this.initTable()
					})
				} else {
					this.$message.error("错误删除")
				}

			},
			forstate(row, column) {
				switch (row.state) {
					case 1:
						return '未分配'
						break;
					case 2:
						return '已分配'
						break;
					default:
						break;
				}
			},
			filterTag(value, row) {
				return row.state === value;
			},
			getNowFormatDate() {//获取当前时间
				var date = new Date();
				var seperator1 = "-";
				var seperator2 = ":";
				var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				var strDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
					+ " " + date.getHours() + seperator2 + date.getMinutes()
					+ seperator2 + date.getSeconds();
				return currentdate;
			}
		}
	}
</script>

<style scoped="scoped">
	#oppoyment {
		margin-left: 40px;
	}

	.line {
		background: black;
	}

	.block {
		float: right;
	}
</style>